<template>
  <PageWrapper dense contentClass="p-16px">
    <Card>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <div class="h-64px flex flex-col justify-between">
            <div class="flex items-center">
              <h3 class="mr-6px mb-0">{{ state.productInfo.spuName }}</h3>
              <HeartTwoTone :twoToneColor="state.productInfo.followStatus ? '#fadb14' : ''" />
            </div>
            <div>
              <template v-for="tag in state.spuKeyWord" :key="tag">
                <Tooltip v-if="tag.length > 20" :title="tag">
                  <Tag :closable="false" color="blue" @close="handleClose(tag)">
                    {{ `${tag.slice(0, 20)}...` }}
                  </Tag>
                </Tooltip>
                <Tag v-else :closable="fale" color="blue" @close="handleClose(tag)">
                  {{ tag }}
                </Tag>
              </template>
              <!-- <Input
                v-if="state.inputVisible"
                ref="inputRef"
                type="text"
                size="small"
                :style="{ width: '78px' }"
                v-model:value="state.inputValue"
                @blur="handleInputConfirm"
                @keyup.enter="handleInputConfirm"
              />
              <Tag v-else @click="showInput" style="background: #fff; border-style: dashed">
                <plus-outlined />
                新增标签
              </Tag> -->
            </div>
          </div>
        </div>
        <Space>
          <Button @click="handleCancel">返回</Button>
          <Button @click="handleEdit">编辑</Button>
          <!-- <Dropdown>
            <template #overlay>
              <Menu @click="handleMenuClick">
                <MenuItem key="1">销售订单</MenuItem>
                <MenuItem key="2">销售退款</MenuItem>
              </Menu>
            </template>
            <Button @click.prevent type="primary">新建关联
              <DownOutlined />
            </Button>
          </Dropdown> -->
          <Dropdown>
            <template #overlay>
              <Menu @click="handleMenuClick">
                <!-- <MenuItem key="3">移交</MenuItem> -->
                <MenuItem key="4">删除</MenuItem>
              </Menu>
            </template>
            <Button @click.prevent>
              <SmallDashOutlined />
            </Button>
          </Dropdown>
        </Space>
      </div>
      <Divider />
      <Tabs v-model:activeKey="state.activeKey">
        <TabPane key="1" tab="产品详情">
          <BaseInfo :productInfo="state.productInfo" />
        </TabPane>
        <TabPane key="2" tab="供应商">
          <Supplier />
        </TabPane>
        <TabPane key="3" tab="成交记录" forceRender>
          <relevantInformation />
        </TabPane>
        <TabPane key="4" tab="附件">
          <FileList />
        </TabPane>
        <TabPane key="5" tab="操作日志">
          <Log title="产品" />
        </TabPane>
      </Tabs>
    </Card>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { onMounted, reactive, createVNode } from 'vue';
  import { getProduct, delProduct } from '@/api/product';
  import {
    Tag,
    // Rate,
    Tooltip,
    Card,
    Space,
    Button,
    Dropdown,
    Menu,
    Divider,
    Tabs,
    Modal,
  } from 'ant-design-vue';
  import { useTabs } from '@/hooks/web/useTabs';
  import { useGo } from '@/hooks/web/usePage';
  import { PageEnum } from '@/enums/pageEnum';
  import { Log } from '@/components/Log';
  import { FileList } from '@/components/FileList';
  import BaseInfo from './components/baseInfo.vue';
  import Supplier from './components/supplier.vue';
  import relevantInformation from './components/relevantInformation.vue';
  import type { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
  import { SmallDashOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { useRoute } from 'vue-router';
  /** 拿到路由的id */
  const route = useRoute();
  const productId = route.query.id as string;
  defineOptions({ name: 'ProductDetail' });
  const MenuItem = Menu.Item;
  const TabPane = Tabs.TabPane;
  const emit = defineEmits(['register', 'reload']);
  const { closeCurrent } = useTabs();
  const state = reactive({
    spuKeyWord: [],
    inputVisible: false,
    inputValue: '',
    activeKey: '1',
    productInfo: {},
  });
  const handleClose = (removedTag: string) => {
    const spuKeyWord = state.spuKeyWord.filter((tag) => tag !== removedTag);
    state.spuKeyWord = spuKeyWord;
  };

  const handleMenuClick = (e: MenuInfo) => {
    switch (e.key) {
      case '4':
        handleDelete();
        break;

      default:
        break;
    }
  };
  const handleDelete = () => {
    Modal.confirm({
      title: '删除',
      icon: createVNode(ExclamationCircleOutlined),
      content: '你确定要删除当前产品吗？',
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        await delProduct(state.productInfo.spuId);
        handleCancel();
      },
    });
  };
  const go = useGo();
  function handleEdit() {
    closeCurrent();
    go({
      path: '/product/productEdit' as PageEnum,
      query: { id: productId, type: 'update' },
    });
  }
  function handleCancel() {
    closeCurrent();
    go({ path: '/product/product' as PageEnum });
  }
  const getSpuInfo = async () => {
    const res = (await getProduct(productId)) as any;
    // res.followStatus =
    //   res.followerIds.split(',').findIndex((item) => item == userStore.userInfo?.userId) > -1;
    state.spuKeyWord = res.spuKeyWord.split(',');
    state.productInfo = res;
  };
  onMounted(() => {
    getSpuInfo();
  });
</script>

<style lang="less" scoped>
  :deep(.ant-tag) {
    margin-right: 6px;
  }

  :deep(.ant-card-body) {
    padding: 16px;
  }
</style>
